<template>
    <div class="box">
      <m-head title="确认订单"></m-head>
      <div class="list">
        <div class="item">
          <div class="title">
            <h3>购买课程</h3>
          </div>
          <div class="course">
            <img src="../../static/images/pic.jpg" alt="">
            <div class="info">
              <h3 class="name">成人英语口语成人英语口语VIP一对一课程</h3>
              <p class="price">价格：<span>￥576.00</span></p>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="title">
            <h3>选择支付方式</h3>
          </div>
          <div class="pay">
            <div class="payitem">
              <img src="../../static/images/zfb.jpg" alt="">
              <div class="payname">
                <h3>支付宝钱包支付</h3>
                <span>推荐支付宝用户使用</span>
              </div>
            </div>
            <div class="payitem">
              <img src="../../static/images/zfb.jpg" alt="">
              <div class="payname">
                <h3>支付宝钱包支付</h3>
                <span>推荐支付宝用户使用</span>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="title">
            <h3>确认收货人信息</h3>
          </div>
          <div class="receiver" @click="$router.push('./address')">
            <div class="rinfo">
              <div class="one">
                <span class="mr">默认</span>
                <span>江苏省 南京市 秦淮区</span>
              </div>
              <h3>石门坎104号首屏大厦</h3>
              <div class="tel">
                <span>张先生</span>
                <span>15508232345</span>
              </div>
            </div>
            <span class="arrow"></span>
          </div>
        </div>
        <div class="item">
          <div class="title"><h3>订单信息</h3></div>
          <div class="order">
            <div class="oprice">订单总价：<span>#576.00</span></div>
            <div class="youhui">优惠价格：<span>#0.00</span></div>
            <div class="yunfei">运费：<span>￥0.00</span></div>
            <div class="tprice">实付订单价格：<span>￥576.00</span></div>
          </div>
        </div>
      </div>
      <div class="fix"><button>提交订单</button></div>
    </div>
</template>

<script>
import MHead from './MHeader'
export default {
  name: 'confirm-order',
  components: {
    'm-head': MHead
  }
}
</script>

<style scoped>
.title{
  height: .9rem;
  line-height: .9rem;
  background: #f5f5f5;
  padding: 0 .3rem;
}
.title h3{
  font-size: .42rem;
  color: #555;
  position: relative;
  padding-left: .3rem;
}
.title h3:before{
  content: '';
  position: absolute;
  top: 27%;
  left: 0;
  border-left: 3px solid #ddd;
  height: 50%;
}
.course{
  display: flex;
  align-items: flex-start;
  padding: .3rem;
}
.course img{
  width: 3rem;
  margin-right: .3rem;
}
.info{
  flex-grow: 1;
  width: 3.6rem;
}
.info .name{
  font-size: .44rem;
  margin-top: .1rem;
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: .3rem;
}
.info .price{
  font-size: .36rem;
}
.info .price span{
  font-size: .42rem;
  color: #ed702d;
}
.order{
  padding: .4rem .3rem;
  text-align: left;
}
.oprice{
  font-size: .38rem;
  margin-bottom: .2rem;
}
.oprice span{
  color: #55a125;
}
.youhui{
  font-size: .38rem;
  margin-bottom: .2rem;
}
.youhui span{
  color: #ed702d;
}
.yunfei{
  font-size: .38rem;
  margin-bottom: .2rem;
}
.yunfei span{
  color: #ed702d;
}
.tprice{
  font-size: .46rem;
}
.tprice span{
  color: #55a125;
}
.payitem{
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  padding: .3rem;
}
.payitem img{
  width: 1.2rem;
  margin-right: .3rem;
}
.payname h3{
  font-size: .4rem;
  color: #333;
}
.payname span{
  font-size: .32rem;
  color: #888;
}
.receiver{
  position: relative;
  padding: .3rem;
  font-size: .36rem;
}
.receiver .arrow{
  right: .3rem;
}
.rinfo .one span.mr{

}
.rinfo h3{
  font-size: .4rem;
  font-weight: bold;
  margin: .2rem 0;
}
.fix{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.2rem;
  line-height: 1.2rem;
  text-align: center;
}
.fix button{
  background: #0959c8;
  display: block;
  width: 100%;
  border: none;
  height: 1.2rem;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  font-size: .48rem;
  letter-spacing: 2px;
}
.box{
  padding-bottom: 1.5rem;
}
</style>
